<template>
  <view class="custom-tabbar">
    <view
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-item"
        :class="{ active: activeIndex === index }"
        @click="switchTab(item, index)"
    >
      <!-- 图标：动态切换选中/未选中状态 -->
      <image
          :src="activeIndex === index ? item.selectedIcon : item.icon"
          class="icon"
      />
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    activeIndex: {type: Number, default: 0} // 由父组件传递当前激活索引
  },
  data() {
    return {
      tabList: [
        {
          pagePath: "/pages/index/index",
          text: "自定义index",
        },
        {
          pagePath: "/pages/view1/view1",
          text: "自定义view1",
        },
        {
          pagePath: "/pages/view2/view2",
          text: "自定义view2",
        },
        {
          pagePath: "/pages/view3/view3",
          text: "自定义view3",
        },
      ]
    };
  },
  methods: {
    switchTab(item, index) {
      // 关键步骤：跳转到对应页面
      uni.switchTab({url: item.pagePath});
      // 通知父组件更新激活状态
      // this.$emit("tab-change", index);
    }
  }
};
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.active {
  color: #007AFF; /* 选中态颜色 */
}

.icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}
</style>